<template>
    <div>
        <el-row>
            <el-col :span="24">
                <!-- 幻灯片 -->
                <Carousel></Carousel>
            </el-col>
        </el-row>

        <!-- v-for 要求给循环元素绑定 key属性 key赋对象中唯一的属性值即可 -->
        <el-row class="top-list"> <!-- 添加class -->
            <el-col :span="5" style="text-align: center;margin: 30px 30px;" v-for="book in bookList" :key="book.id">
                <el-card :body-style="{ padding: '20px' }">
                    <img :src="require('../assets/' + book.imgsrc)" style="width: 100%; height: 100%;"
                        @click="queryDetail(book.id)">
                    <div>
                        <h3>{{ book.name }}</h3>
                        <p class="top-rank">景区TOP榜单</p> <!-- 移除index -->
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Carousel from './Carousel.vue';

export default {
    data() {
        return {
            bookList: [],
        }
    },

    methods: {
        queryAll() {
            this.$axios.get('api/market/queryAll')
                .then(response => {
                    console.log(response.data);
                    if (response.data.code == 200) {
                        this.bookList = response.data.data;
                    }

                })
        },
        queryDetail(id) {
            // 记录点击行为
            this.$axios.post('api/market/recordClick', { bookId: id })
                .then(/* 可添加响应处理 */)

            this.$router.push({ path: '/goodDetail', query: { 'bookId': id } })
        },
    },
    created() {
        this.queryAll();
    },
    components: {
        Carousel
    }
}
</script>

<style scoped>
.top-list {
    counter-reset: top-counter;
    /* 初始化计数器 */
}

.top-list .el-col {
    counter-increment: top-counter;
    /* 每列递增 */
}

.top-rank::after {
    content: counter(top-counter);
    /* 显示计数器值 */
    color: #ff6600;
    font-weight: bold;
    margin-left: 5px;
}
</style>
